<template>
  <PageContainer>
    <Header title="名片详情" />
    <view class="hb-p-4 hb-flex hb-flex-col hb-gap-4">
      <BasicInfo :cardDetail="cardDetail" />
      <IdentityBackground
        v-if="cardDetail.socialIdentityList?.length"
        :socialIdentityList="cardDetail.socialIdentityList"
      />
      <Introduction v-if="cardDetail.description" :description="cardDetail.description" />
      <CompanyInfo
        v-if="cardDetail.botCompanyInfoVoList?.length"
        :botCompanyInfoVoList="cardDetail.botCompanyInfoVoList"
      />
      <ProductService
        v-if="cardDetail.botProductServiceVoList?.length"
        :botProductServiceVoList="cardDetail.botProductServiceVoList"
      />
      <AttachmentDocs
        v-if="cardDetail.botAttachmentInfoVoList?.length"
        :botAttachmentInfoVoList="cardDetail.botAttachmentInfoVoList"
      />
      <BottomSubmit
        v-if="otherQuery"
        submitBtnLabel="AI提炼与TA的合作机会"
        :hide-cancel-btn="true"
        submitBtnIcon="ali-icon icon-ai"
        @submit="handleAiExtract"
      />
      <BottomSubmit
        v-else
        submitBtnLabel="分享名片"
        cancelBtnLabel="编辑名片"
        :hide-cancel-btn="false"
        @cancel="handleEdit"
        @submit="shareVisible = true"
      />
      <view class="hb-fixed hb-bottom-38 hb-right-4" @click="handleConsult">
        <TImage
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/zixun.png"
          width="96rpx"
          height="116rpx"
        />
      </view>

      <CustomShare
        v-model="shareVisible"
        :is-custom-wx-share-callback="true"
        :code-url="userInfo?.aiUserAccountBotVo.qrCodeUrl"
        :show-copy-link="true"
      />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* cardDetail 名片详情 */
  import { getBotCardById } from '@/api/card';
  import { BotCardInfo } from '@/api/card/type';
  import { ref, reactive } from 'vue';
  import BasicInfo from './components/BasicInfo.vue';
  import IdentityBackground from './components/IdentityBackground.vue';
  import Introduction from './components/Introduction.vue';
  import CompanyInfo from './components/CompanyInfo.vue';
  import ProductService from './components/ProductService.vue';
  import AttachmentDocs from './components/AttachmentDocs.vue';
  import { useUserStore } from '@/store/modules/user';
  import { getUrl } from '@/router';

  const uuid = ref<string>('');
  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);
  let otherQuery: boolean = false;

  const shareVisible = ref(false);

  customOnload<'CardDetail'>((options) => {
    uuid.value = options.uuid;
    otherQuery = options.uuid !== userStore.uuid;
    getCardDetail();
  });

  const cardDetail = reactive<BotCardInfo>({} as BotCardInfo);

  const getCardDetail = async () => {
    const res = await getBotCardById(uuid.value);
    cardDetail.name = res.name;
    cardDetail.description = res.description;
    cardDetail.iconFileUrl = res.iconFileUrl;
    cardDetail.socialIdentityList = res.socialIdentityList;
    cardDetail.botInfoVo = res.botInfoVo;
    cardDetail.botCompanyInfoVoList = res.botCompanyInfoVoList;
    cardDetail.botAttachmentInfoVoList = res.botAttachmentInfoVoList;
    cardDetail.botProductServiceVoList = res.botProductServiceVoList;
    cardDetail.certificationType = res.certificationType;
  };

  const handleEdit = () => {
    navigateTo({
      name: 'cardEdit',
      options: {
        success: () => {
          getCardDetail();
        },
      },
    });
  };

  onShareAppMessage(() => {
    return {
      title: `推荐「${cardDetail.name}」的智能助手,【立即问TA】`,
      path: getUrl('cardDetail', { uuid: uuid.value }),
      imageUrl: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/saas-ai/share-img.png',
    };
  });

  const handleAiExtract = () => {
    navigateTo({
      name: 'aiChatPage',
      options: {
        uuid: uuid.value,
      },
    });
  };
  const handleConsult = () => {
    navigateTo({
      name: 'aiChatPage',
      options: {
        uuid: uuid.value,
      },
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>
